<script setup>
import { ref, reactive } from 'vue';
import { service } from '@utils';

const visible = ref(false);
const showBuyPrice = ref(1);

let state = reactive({
    param: {},
    resData: [],
});

const open = (item, showBuyPriceValue) => {
    showBuyPrice.value = showBuyPriceValue;
    state.param = { ...item };
    if (showBuyPriceValue == 1) {
        getDetail();
    } else if (showBuyPriceValue == 2) {
        rentDetail();
    }
    visible.value = true;
};
const getDetail = async () => {
    // state.param.state = '10'
    state.resData = [];
    const res = await service.bfqz.getDetail({
        orderId: state.param.orderId,
    });
    state.resData = res;
};
const rentDetail = async () => {
    state.resData = {};
    const res = await service.bfqz.rentDetail({ orderId: state.param.orderId });
    state.resData = res ? res : {};
};
const close = () => {
    visible.value = false;
    state.param = {};
    showBuyPrice.value = false;
};
//把方法暴露给父组件
defineExpose({
    open,
});
</script>

<template>
    <div>
        <el-dialog v-model="visible" :title="showBuyPrice == 1 ? '付款明细' : showBuyPrice == 2 ? '还租详情' : ''" center :close-on-click-modal="false" @close="close" destroy-on-close :width="820">
            <div>
                <div v-if="showBuyPrice == 2">
                    <el-table :data="state.resData.rentOrderStageVoList" style="width: 100%">
                        <el-table-column prop="stagesNow" label="期数" width="56" />
                        <el-table-column prop="rentDate" label="应还租日" width="178" />
                        <el-table-column prop="price" label="应还租金" />
                        <el-table-column prop="overduePrice" label="逾期滞纳金 " width="100" />
                        <el-table-column prop="payPrice" label="已支付" />
                        <el-table-column prop="payRent" label="实还租金" />
                        <el-table-column label="本期是否结清" width="108">
                            <template #default="{ row }">
                                <span v-if="row.hasSettle == true">是</span>
                                <span v-else>否</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="settleType" label="本期结清方式" width="108">
                            <template #default="{ row }">
                                <span v-if="row.settleType == 0">租金结清</span>
                                <span v-else-if="row.settleType == 1">逾期结清</span>
                                <span v-else-if="row.settleType == 2">逾期扣除押金结清</span>
                                <span v-else-if="row.settleType == 3">逾期扣除押金还部分</span>
                                <span v-else-if="row.settleType == 4">逾期部分支付</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="repayDate" label="本期结清时间" width="168" />
                    </el-table>
                    <div style="display: flex; margin: 10px 0; justify-content: space-around">
                        <div>
                            <span>总应还滞纳金:&nbsp;</span>
                            <span>{{ state.resData.overduePriceSum || 0 }}</span>
                        </div>
                        <div>
                            <span>减免滞纳金:&nbsp;</span>
                            <span>{{ state.resData.reduceOverdue || 0 }}</span>
                        </div>
                        <div>
                            <span>已还滞纳金:&nbsp;</span>
                            <span>{{ state.resData.alsoOverduePrice || 0 }}</span>
                        </div>
                        <div>
                            <span>剩余应还滞纳金:&nbsp;</span>
                            <span>{{ state.resData.leftOverduePrice || 0 }}</span>
                        </div>
                    </div>
                </div>
                <div v-if="showBuyPrice == 1">
                    <el-table :data="state.resData" style="width: 100%">
                        <el-table-column prop="tradeNo" label="流水号" width="280" />
                        <el-table-column label="科目" width="140">
                            <template #default="{ row }">
                                <span v-if="row.type == 0">租金</span>
                                <span v-else-if="row.type == 1">逾期租金</span>
                                <span v-else-if="row.type == 2">买断</span>
                                <span v-else-if="row.type == 3">逾期买断</span>
                                <span v-else-if="row.type == 4">意外保障金</span>
                                <span v-else-if="row.type == 5">押金</span>
                                <span v-else-if="row.type == 6">押金转租金</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="金额">
                            <template #default="{ row }">¥{{ row.amount }}</template>
                        </el-table-column>
                        <el-table-column prop="createDate" label="时间" width="200" />
                    </el-table>
                </div>
            </div>

            <template #footer>
                <span class="flex-align-end">
                    <div class="margin-right20">
                        <el-button @click="close">取消</el-button>
                    </div>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
